<template>
    <div class="card-page">
        <tool-bar nav="" :title="action_name + '发布单'">
            <el-button size="small" @click="$router.push('/dev/deploy-sheet/add')" v-if="$props.action=='edit'">新建</el-button>
            <el-button type="primary" size="small" @click="deploy_sheet" v-if="$props.action=='edit'">构建</el-button>
            <el-button   size="small" @click="show_logs" v-if="$props.action=='edit'">查看日志</el-button>
            <el-button size="small" @click="save_click" type="primary">保存</el-button>
        </tool-bar>
        <div class="card">
            <kv label="name">
                <el-input v-model="info.name" chk="*"/>
            </kv>

            <kv label="产品线">
                <product-line title="productLine" v-model="info.productLine.code"
                              @change="(_,v)=>{info.productLine.id=v.id;info.productLine.name=v.name}">
                </product-line>
            </kv>

            <kv label="remark">
                <el-input v-model="info.remark" type="textarea"/>
            </kv>
        </div>


        <git-data-ref v-show="false" ref="list" v-model="willAddList" multi @change="add_apis_change()">
        </git-data-ref>

        <input-table style="width:100%" v-model="info.items" @add="add_click" v-if="info.id">

            <template #head >    <div slot="head" class="title">
                项目
            </div> </template>
            <el-table-column align="left" label="git地址">
                <template v-slot="scope">
                    <div>
                        {{ scope.row.gitData.url }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="left" label="git名称" width="240px">
                <template v-slot="scope">
                    <div>
                        <el-tag v-if="scope.row.gitData.isLib"> 库</el-tag>
                        {{ scope.row.gitData.language }}-
                        {{ scope.row.gitData.name }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="left" label="git分支" width="220px">
                <template v-slot="scope">
                    <selector style="min-width:80%" mode="radio" v-model="scope.row.gitBranch" chk="*"
                              fields="name,fullName"
                              :data="scope.row.git_branches"
                              ></selector>

                </template>
            </el-table-column>
            <el-table-column align="left" label="git路径" width="220px">
                <template v-slot="scope">
                    <selector v-model="scope.row.buildFolder"
                              fields="name,path"
                              :data="scope.row.gitData.folders"></selector>
                </template>
            </el-table-column>
            <el-table-column align="left" label="部署状态" width="160px">
                <template v-slot="scope">
                    <div v-if="scope.row.deployLog">
                        <el-tag v-if=" scope.row.deployLog.status != 'Working' ">{{
                                scope.row.deployLog.status
                            }}
                        </el-tag>

                        <el-steps v-else-if="scope.row.deployLog.stages && scope.row.deployLog.stages.length"
                                  :active="scope.row.deployLog.stages.length-1"
                                  finish-status="success" process-status="wait"
                                  style="margin: 20px;">
                            <el-step :title="item.name" v-for="(item,index) in scope.row.deployLog.stages"
                                     :key="item.name"
                                     @click.native="pop_msg(item)"
                                     :status="item.successful == null ? 'wait' : (item.successful? 'success':'error')"
                            ></el-step>
                        </el-steps>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="left" label="部署进度" width="130px">
                <template v-slot="scope">
                    <el-button>打开Jenkins</el-button>
                </template>
            </el-table-column>
        </input-table>

    </div>
</template>

<script setup>
/**
 * Created by CodeGenerator  at 2024-01-28 10:06:33
 */

import productLine from "@/component/product-line.vue";
import RefApiDefine from "@/view/dev/api-define/ref-api-define.vue";
 
import gitDataRef from "../git-data/git-data-ref.vue"





//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({
    willAddList: [],
    info: {
        productLine: {},
        items: [],
    }, //子对象需要声明。

    JenkinsLanguageEnum: jv.enum.JenkinsLanguageEnum.getData(),
    SystemEnvEnum: jv.enum.SystemEnvEnum.getData(),
    MicroServiceDeployEnvEnum: jv.enum.MicroServiceDeployEnvEnum.getData(),
});
const info = $computed(()=> $data.info );

const $props = defineProps({
    action: { type: String } ,
    id : { type: String }
});




const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);

const action = $computed( function() {
    return $props.id ? "edit" : "add";
});
const action_name = $computed( function() {
    return {add: "添加", edit: "修改"}[$props.action]
});

const add_click = function(v, list) {
    list.splice(-1, 1)
    $data.willAddList = [];
    list.value.$refs.list.popClick();
};
const add_apis_change = async function(v) {
    var list = [];
    for(var it of $data.willAddList){
        var v = {};
        v.gitData = it;
        v.deployLog = {};
        v.git_branches = await getBranches(v.gitData.id);
        list.push(v);
    }
    $data.info.items.addAll( list);
};
const getBranches = async function(gitId){
    var res = await  jv.$http.post('/dev/git/branch/list?gitId=' + gitId)
    var branches = res.data.data || [];
    branches.forEach(it => {
        it.fullName = (it.committerName + " --> " + it.name);
    });
    return branches.slice(0,8);
};
const loadData = async function() {
    if (!$props.id) return;
    let res = await jv.$http.post("/dev/deploy-sheet/detail/" + $props.id)
    var info = res.data.data;
    for(var i=0,len =  info.items.length;i<len;i++){
        var item =  info.items[i];
        item.git_branches = await getBranches(item.gitData.id);
    }
    $data.info = info;
};
const save_click = async function() {
//校验
    if (jv.chk_main($data) == false) {
        return;
    }
    let res = await jv.$http.post("/dev/deploy-sheet/save", $data.info)
//[axios拦截器中已处理了异常]。
    jv.info(action_name + " 成功");
    let id = res.data.data || $data.info.id;
    if (!id) {
        return jv.error("找不到 id");
    }
    jv.$router.push("/dev/deploy-sheet/edit/" + id);
};
const deploy_sheet = async function() {
    await save_click();
    let res = await jv.$http.post("/ops/jenkins/deploy-sheet/" + $data.info.id);
    await show_logs();
};
const show_logs = async function() {
    await loadData();
    if ($data.info.status == "Working") {
        await jv.sleep(3000);
        await show_logs();
    }
};

onMounted( function() {
    loadData();
} )



</script>

<style scoped lang="scss">
</style>
